<template>
  <div class="item-table">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-line" width="0.3rem" height="0.3rem"></icon>
        </span>
        <div class="d-flex">
          <span
            class="fs-xl text mx-2"
            style="line-height: 0.3rem;font-size: 0.2rem;"
            >最新测量数据</span
          >
        </div>
      </div>
      <div class="d-flex jc-center body-box">
        <div class="no-data" :style="{opacity}">暂无数据</div>
        <dv-scroll-board :config="config" style="width:100%;height:3.85rem" @click="goMyPatient"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    tableData: {
      handler(val) {
        this.opacity=0.6
        let config =this.config
        config.data=val.map((item,index)=>{
          return [item.name,item.age,item.sex == 1?'男':'女',item.diseaseCategory||'-',
               item.testDate,`<span style="color:${item.isSbpAbnormal?this.colors[item.sbpAbnormalLevel] : ''}">${item.sbp}</span>`,
          `<span style="color:${item.isDbpAbnormal?this.colors[item.dbpAbnormalLevel] : ''}">${item.dbp}</span>`,item.hr
             ]
         })
         if(config.data.length){
           this.opacity=0
         }
        this.config = JSON.parse(JSON.stringify(config))
      },
      deep: true
    }
  },
  data() {
    return {
      colors:['#409EFF','rgb(253,154,1)','red'],//警告颜色
      opacity: 0.6,
      config: {
        header: ["姓名", "年龄", "性别",'患者病类','测量时间','收缩压(mmHg)','舒张压(mmHg)','脉搏(次/分)'],
        data: [],
        rowNum:8, //表格行数
        headerHeight: 35,
        headerBGC: "#0f1325", //表头
        oddRowBGC: "#0f1325", //奇数行
        evenRowBGC: "#171c33", //偶数行
        index: true,
        columnWidth: [100,100,100,100,150,200,120,120,100],
        align: ["center"]
      }
    };
  },
  components: {},
  created() {

  },
  methods: {
    //前往我的患者
    goMyPatient(e){
      this.$router.push('/manbing/patient?patientId='+this.tableData[e.rowIndex].patientId)
    }
  }
};
</script>

<style lang="scss" scoped>
.item-table {
  padding: 0.2rem;
  height: 4rem;
  border-radius: 0.0625rem;
  .no-data{
    position: absolute;
    width: 100%;
    text-align: center;
    top:2.4rem;
  }
  .bg-color-black {
    height: 3.65rem;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 0.125rem;
    overflow: hidden;
  }
}
</style>
